<template>
  <div class="page">
    <mt-tab-container v-model="tabItemActive">
      <mt-tab-container-item id="tab_news">
        <home></home>
      </mt-tab-container-item>
      <mt-tab-container-item id="tab_sort">
        <sort></sort>
      </mt-tab-container-item>
      <mt-tab-container-item id="tab_girls">
        <girls></girls>
      </mt-tab-container-item>
      <mt-tab-container-item id="tab_collect">
        <collect></collect>
      </mt-tab-container-item>
    </mt-tab-container>

    <mt-tabbar v-model="tabItemActive" fixed>
      <mt-tab-item
        v-for="(item,index) in tabs"
        :key="index"
        :id="item.id"
        @click.native="changeState(item)"
      >
        <img :src="item.img_url_active" alt slot="icon">
        <svg slot="icon" aria-hidden="true">
            <use :href="item.img_url"></use>
            <use :href="item.active?item.img_url_active:item.img_url"></use>
        </svg>
        {{ item.name }}
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import Detail from "./Detail.vue";
import Home from "./Home.vue";
import Girls from "./Girls.vue";
import Sort from "./Sort.vue";
import Collect from "./Collect.vue";
import { mapMutations } from 'vuex';
import { CHANGE_TAB_SELECTED } from './../store/mutations-types';

export default {
  name: "Main",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      items: [],
      tabItemActive: "tab_news",
      tabs: [
        {
          id: "tab_news",
          name: "最新",
          img_url: "../../static/images/icon_find_un_click.png",
          img_url_active: "../../static/images/icon_find_click.png",
          active: false
        },
        {
          id: "tab_sort",
          name: "分类",
          img_url: "../../static/images/icon_sort_un_click.png",
          img_url_active: "../../static/images/icon_sort_click.png",
          active: false
        },
        {
          id: "tab_girls",
          name: "妹纸",
          img_url: "../../static/images/icon_me_un_click.png",
          img_url_active: "../../static/images/icon_me_click.png",
          active: false
        },
        {
          id: "tab_collect",
          name: "收藏",
          img_url: "../../static/images/icon_weibo_1.png",
          img_url_active: "../../static/images/icon_weibo_1.png",
          active: false
        }
      ]
    };
  },
  watch: {
    tabItemActive: function(val, oldVal) {
      // 这里就可以通过 val 的值变更来确定
      // this.$store.commit(CHANGE_TAB_SELECTED, val);
      this.CHANGE_TAB_SELECTED(val);
    }
  },
  created() {
    // console.log(this.$store.state.selected);
    const selected = this.$store.state.selected;
    // console.log(selected);
    this.tabItemActive = selected;
  },
  computed: {
    
  },
  methods: {
    ...mapMutations([CHANGE_TAB_SELECTED]),
    changeState(item) {
      // console.log(item.active);
      item.active ? (item.active = false) : (item.active = true);
    }
  },
  components: {
    home: Home,
    detail: Detail,
    girls: Girls,
    sort: Sort,
    collect: Collect
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.page {
  margin-top: 40px;
  margin-bottom: 55px;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
